<template>
	<view class="tab-bar">
		<u-tabbar
			:placeholder="false"
			:value="tab_bar_active"
			@change="change_tab_bar"
			:border="false"
			zIndex="1000"
			style="font-size: 15px;"
			placeholder
			fixed
			activeColor="#333333"
		>
			<u-tabbar-item text="首页" icon="home" name="home"></u-tabbar-item>
			<u-tabbar-item text="点单" icon="car" name="goods" ></u-tabbar-item>
			<u-tabbar-item text="订单" icon="order" name="orders"></u-tabbar-item>
			<u-tabbar-item text="我的" icon="account" name="personal"></u-tabbar-item>
		</u-tabbar>
	</view>
</template>

<script setup>
	import { ref } from "vue"
	const tab_bar_active = ref(wx.getStorageSync("tank_tab_bar_index") || "home");
	
	const change_tab_bar = (name) => {
		wx.setStorageSync('tank_tab_bar_index', name)
		let router_url = ""
		let router_animation_type = ""
		let router_animation_duration = 300
	
		switch(name){
			case "home":
				router_url = "/pages/Tank/home/index";
				router_animation_type = "pop-in";
				break;
			case "goods":
				router_url = "/pages/Tank/goods/index";
				router_animation_type = "pop-in";
				break;
			case "orders":
				router_url = "/pages/Tank/orders/index";
				router_animation_type = "pop-out";
				break;
			case "personal":
				router_url = "/pages/Tank/personal/index";
				router_animation_type = "pop-out";
				break;

		}

		uni.redirectTo({
			url: router_url,
			animationType: router_animation_type,
			animationDuration: router_animation_duration
		});
	}
</script>

<style>
</style>